<template>
  <view class="search-container">
    <view class="u-padding-20">
      <u-search placeholder="请输入游戏名称" action-text="取消" v-model="keyword" @custom="back" @change="change"></u-search>
    </view>

    <!-- 分类 -->
    <u-cell-group>
      <u-cell-item class="item" :arrow="false" v-for="(item,index) in list" :key="item.id">
        <image slot="icon" :src="item.pic"></image>
        <view slot="title">
          <view class="title">{{ item.name }}</view>
          <!-- <view class="desc">这是一款爱不释手的游戏</view> -->
          <view>
            <text class="rate">{{ item.point }}</text>
            <u-rate count="5" disabled inactive-icon="star-fill" inactive-color="#FFCC01"></u-rate>
          </view>
        </view>
        <u-button class="btn" slot="right-icon" shape="circle" :ripple="true" size="mini" @click="startGame(item.url)">
          开始游戏</u-button>
      </u-cell-item>
    </u-cell-group>

    <u-empty text="暂无搜索结果" mode="list" v-if="list.length === 0"></u-empty>
  </view>
</template>

<script>
  import {
    getSearchList,
    isCanPlay
  } from '../../api/index.js'

  export default {
    name: 'Search',
    data() {
      return {
        keyword: '',
        list: []
      }
    },
    onLoad() {
      this.change()
    },
    methods: {
      async change() {
        const res = await getSearchList({
          msg: this.keyword
        })
        this.list = res.data.list
      },
      async startGame(url) {
        const mobile = uni.getStorageSync('hwyx-mobile')
        if (!mobile) {
          return this.$u.toast('请先登录')
        }
        const res = await isCanPlay({
          mobile
        })
        if (res.data.result === 'false') {
          this.$u.toast('请先订购')
        } else {
          if (res.data.data.pid === 98) {
            location.href = url
          } else {
            this.$u.toast('请先订购10元')
          }
        }
      },
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-container {
    // background-color: #7BA0FD;
    padding-top: 104rpx;

    .u-padding-20 {
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 100;
      background-color: #7BA0FD;
    }

    .uni-input-placeholder {
      color: #999999;
      font-size: 30rpx;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      // font-weight: 500;
    }

    /deep/.u-action-active {
      color: white;
      font-size: 30rpx;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
    }

    .item {
      image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 20rpx;
      }

      .title {
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }

      .rate {
        font-size: 28rpx;
        color: #7017FF;
        font-weight: 400;
      }

      .u-rate {
        // font-size: 25rpx;
      }

      .desc {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .btn {
        height: 51rpx;
        background: #8FAFFF;
        // border-radius: 24rpx;
        border: none;
        color: #fff;
        font-size: 22rpx;
        padding: 12rpx 30rpx;
      }
      .u-hairline-border:after {
        border: none;
      }
    }

    // .item {
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
    //   align-items: center;

    //   image {
    //     width: 68rpx;
    //     height: 68rpx;
    //     margin-bottom: 10rpx;
    //   }

    //   text {
    //     font-size: 24rpx;
    //     color: #4B4D54;
    //   }
    // }
  }
</style>
